<script lang="ts">

  let innerHeight = window.innerHeight;
  let innerWidth = window.innerWidth;
  // 定义事件处理函数
  function changeLanguage(lang: string) {
    // 实现语言切换逻辑
    console.log(`Changing language to: ${lang}`);
  }

  function openCenterPage(url: string, title: string) {
    // 实现打开中心页面逻辑
    console.log(`Opening center page: ${url}, title: ${title}`);
  }

  function openTabPage(url: string) {
    // 实现打开标签页逻辑
    console.log(`Opening tab page: ${url}`);
  }

  function loginOut() {
    // 实现登出逻辑
    console.log("Logging out");
  }

  function changeFullScreen() {
    // 实现全屏切换逻辑
    if (!document.fullscreenElement) {
      document.documentElement.requestFullscreen();
    } else {
      if (document.exitFullscreen) {
        document.exitFullscreen();
      }
    }
  }

</script>

<header>
  <div class="left">
    <!-- 左侧区域 -->
    <div class="layui-nav-item" >
      <!--伸缩菜单-->
      <!-- <div
        class="layui-nav-item layadmin-flexible"
        style="margin: 10px 0 0 15px"
      >
        <a
          style="color: #00e4ff;"
          href="javascript:;"
          title="侧边伸缩"
        >
          <i
            class="layui-icon layui-icon-shrink-right"
            style="font-size: 18px"
            id="LAY_app_flexible"
          ></i>
        </a>
      </div> -->

      <!-- <ul class="layui-nav" lay-filter="">
              <li class="layui-nav-item" lay-unselect="">
                  <a href="javascript:;">简体中文<span class="layui-nav-more"></span></a>
                  <dl class="layui-nav-child layui-anim layui-anim-upbit">
                              <dd><a href="javascript:;" on:click={() => changeLanguage('zh-CN')}>简体中文</a></dd>
                              <dd><a href="javascript:;" on:click={() => changeLanguage('zh-HK')}>繁體中文</a></dd>
                              <dd><a href="javascript:;" on:click={() => changeLanguage('en')}>English</a></dd>
                              <dd><a href="javascript:;" on:click={() => changeLanguage('ru')}>русский</a></dd>
                              <dd><a href="javascript:;" on:click={() => changeLanguage('az')}>Azərbaycan</a></dd>
                  </dl>
              </li>
              <li class="layui-nav-item" lay-unselect="">
                  <a href="javascript:;" on:click={() => openCenterPage('/sw/web/agency/select/list.html', '选择经销商')} title="切换经销商">越南总公司（主账号）<span class="layui-badge-dot"></span></a>
              </li>
          <span class="layui-nav-bar" style="top: 38px; width: 0px; left: 70px; opacity: 0;"></span></ul> -->
    </div>
  </div>
  <!-- 中间导航 -->
  <div class="center">
    <!-- <div class="logo" style="" title="共享充电宝运营平台">
      <img height="34" src="/sw/web/resource/images/logo_zh.png" />
    </div> -->
    <ul class="nav">
      <li><a class="on" href="/dp/">友电之星</a></li>

      <!-- <li><a class="" href="/sw/web/monitor/statistic.html">交易统计</a></li>

      <li><a class="" href="/sw/web/monitor/device.html">网点设备</a></li>

      <li><a class="" href="/sw/web/index.html">运营管理</a></li> -->
    </ul>
    <!-- <ul class="layui-nav" lay-filter="">
      <li class="layui-nav-item" lay-unselect="">
        <a href="javascript:;">更多菜单<span class="layui-nav-more"></span></a>
        <dl class="layui-nav-child">
          <dd><a class="on" href="/sw/web/monitor/index.html">首页</a></dd>
          <dd>
            <a class="" href="/sw/web/monitor/statistic.html">交易统计</a>
          </dd>
          <dd><a class="" href="/sw/web/monitor/device.html">网点设备</a></dd>
          <dd><a class="" href="/sw/web/index.html">运营管理</a></dd>
        </dl>
      </li>
      <span class="layui-nav-bar"></span>
    </ul> -->
  </div>

  <!-- 右边区域 -->
  <div class="right">
    <!-- <ul class="layui-nav" lay-filter="">
      <li class="layui-nav-item" lay-unselect="">
        <a href="javascript:;">
          <cite
            ><i
              style="font-size: 15px; margin-right: 4px"
              class="layui-icon layui-icon-username"
            ></i>陶大江</cite
          >
          <span class="layui-nav-more"></span></a
        >
        <dl class="layui-nav-child layui-anim layui-anim-upbit">
          <dd>
            <a
              href="javascript:;"
              on:click={() =>
                openTabPage("/sw/web/agency/user/detail.html?userId=10000006")}
              >基本资料</a
            >
          </dd>
          <dd on:click={loginOut}><a href="javascript:;">退出</a></dd>
        </dl>
      </li>
      <li class="layui-nav-item" lay-unselect="">
        <a href="javascript:;">
          <cite>更多</cite>
          <span class="layui-nav-more"></span></a
        >
        <dl class="layui-nav-child layui-anim layui-anim-upbit">
          <dd>
            <a href="javascript:;" on:click={changeFullScreen}
              ><i class="layui-icon">切换全屏</i></a
            >
          </dd>
        </dl>
      </li>
      <span
        class="layui-nav-bar"
        style="top: 39px; width: 0px; left: 20px; opacity: 0;"
      ></span>
    </ul> -->
    <a
      class="version"
      href="javascript:;"
      >v&nbsp;1.50.0 {innerWidth} x {innerHeight}</a
    >
  </div>
</header>

<style scoped>
  header {
    z-index: 99999;
    display: flex;
    flex-direction: row;
    height: 100%;
    /* height: 140px; */
    /* overflow-x: auto; */
    /* overflow-y: inherit; */
  }
  .left {
    position: relative;
    /* min-width: 480px; */
    width: 20%;
    height: 100%;
    background: url(/dp/header_left.png) no-repeat 0 0;
    background-size: cover;
  }

   .center {
    width: 60%;
    height: 90%;
    /* height: 100px; */

    flex-grow: 1;
    display: flex;
    flex-direction: row;
    justify-content: center;
    background: url(/dp/header_center.png) repeat 0 0;
    background-color: transparent;
    background-size: inherit;
    /* padding-top: 1.2%; */
  }

  header .center .nav {
    display: flex;
    width: 100%;
    height: 100%;
    /* width: 700px; */
    /* margin-top: 6px; */
    /* margin-top: */
    flex-direction: row;
    justify-content: space-around;
    align-items: center;
  }

  li {
    list-style: none;
  }

  header .center .nav li a {
    font-size: 2rem;
    font-weight: bold;
    color: #ffffff !important;
    text-shadow: 0 0 30px #000000;
  }

  header .center .nav li a.on {
    -webkit-text-fill-color: rgba(22, 228, 255, 0.903);
    -webkit-text-stroke: 2px rgba(0, 0, 0, 0.399);
    text-shadow:
        2px 2px 3px rgba(0, 0, 0, 0.5), /* 主阴影 */
        -2px -2px 3px rgba(255, 255, 255, 0.5); /* 高光 */
    font-weight: bold;
    font-family: PangMenZhengDao-Regular;
    letter-spacing: 4px;
  }

  header .right {
    position: relative;
    /* display: inline-block; */
    width: 20%;
    /* min-width: 480px; */
    /* height: 140px; */
    height: 100%;
    /* flex: 1; */
    background: url(/dp/header_right.png) no-repeat 0 0;
    background-size: cover;
}

header .right .version {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    right: 1.2rem;
    font-size: 1rem;
    color: #00e4ff;
    font-style: italic;
    text-decoration: underline;
}
</style>
